<template>
	<view class="Column width100 bg" :style="'height:' + height + 'px'">
		<view class="width100 lines m-top10 padding30" @click="ClickTo(1)">
			<text class="text">{{ item01 }}</text>
		</view>
		<view class="margin30" style="height: 1upx; background: #BBBBBB;"></view>
		<view class="width100 lines  padding30" @click="ClickTo(2)">
			<text class="text">{{ item02 }}</text>
		</view>
		<view class="margin30" style="height: 1upx; background: #BBBBBB;"></view>
		<view class="width100 lines  padding30" @click="ClickTo(3)">
			<text class="text">{{ item03 }}</text>
		</view>
		<view class="Row  width100 lines m-top10 padding30">
			<text class="text">{{ item04 }}</text>
			<view class="Flex1"></view>
			<switch checked @change="switch1Change" style="margin-right: 30upx;" />
		</view>

		<view class="width100 lines m-top10 padding30" style="text-align: center;" @click="ClickTo(4)">
			<text class="text" style="color: #EB162D ;">{{ item05 }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			height: 0,
			item01: '账户安全',
			item02: '仅WiFi下加载商品图片',
			item03: '清理缓存',
			item04: '关于我们',
			item05: '退出登录',
			item06: ''
		};
	},
	onLoad: function() {
		this.height = uni.getSystemInfoSync().windowHeight;
	},
	methods: {
		switch1Change: function(e) {
			console.log('switch1 发生 change 事件，携带值为', e.target.value);
		},
		ClickTo(e) {
			switch (e) {
				case 1:
					uni.navigateTo({
						url: 'user_security'
					});
					break;
				case 2:
					uni.navigateTo({
						url: ''
					});
					break;
				case 3:
					uni.navigateTo({
						url: ''
					});
					break;
			}
		}
	}
};
</script>

<style>
.Fixed {
	position: fixed;
}

.padding30 {
	padding-left: 30upx;
	padding-right: 30upx;
}
.bg {
	background: #f7f7f7;
}
.lines {
	line-height: 70upx;
	background: #ffffff;
}
.m-top10 {
	margin-top: 15upx;
}

.text {
	font-size: 28upx;
	color: #000000;
	font-weight: bold;
}
</style>
